<template>
    <div class="cat-container">
        <ul class="cat-ul">
            <li v-for="(item,index) in imgItems" :key="index">
                <a href="#"><img :src=imgItems[index] :alt="index"></a>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"Category",
    data(){
        return {
            imgItems:[
                require('../../img/5g新品.jpg'),
                require('../../img/小米秒杀.png'),
                require('../../img/超值特卖.webp'),
                require('../../img/小米众筹.webp'),
                require('../../img/以旧换新.webp'),
                require('../../img/超值特卖.webp'),
                require('../../img/小米众筹.webp'),
                require('../../img/以旧换新.webp'),
            ]
        }
    }
}
</script>
<style lang="scss">
$base: 50;
.cat-container{
    .cat-ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        li img{
            box-sizing: border-box;
            width: 167rem / $base;
            height: 167rem / $base;
        }
    }
}
</style>